import React from 'react'
import './list.css'
import Header from '@common/header'
import { Radio, Table, Pagination, Button, Input } from 'antd'
import { DownloadOutlined } from '@ant-design/icons'
import { getProjectList } from '@api/project'

const render = (type, record) => {
  let  typeStr = null
  if (type === '0') {
    typeStr = '异常'
  } else if (type === '1') {
    typeStr = '已填'
  }
  return type === '-' ? type : <div className={ `list-status ${ type === '1' ? 'filled' : 'abnormal' }` }>{ typeStr }</div>
}

const columns = [
  {
    title: '序号',
    width: 60,
    align: 'center',
    fixed: 'left',
    render: (text, record, index) => index + 1
  },
  {
    title: '分类',
    width: 140,
    dataIndex: 'project_type',
    align: 'left',
    fixed: 'left',
    ellipsis: true
  },
  {
    title: '项目名称',
    dataIndex: 'project_title',
    align: 'left',
    width: 300,
    ellipsis: true
  },
  {
    title: '类别',
    dataIndex: 'project_catalog',
    align: 'left',
    width: 100,
    ellipsis: true
  },
  {
    title: '拟下达2021年金额（元）',
    dataIndex: 'propare_amount',
    width: 192,
    align: 'right',
    ellipsis: true
  },
  {
    title: '项目信息',
    dataIndex: 'isWrited',
    width: 90,
    align: 'center',
    render
  },
  {
    title: '资金情况',
    dataIndex: 'countryofStatus',
    width: 90,
    align: 'center',
    render
  },
  {
    title: '项目绩效',
    dataIndex: 'performanceStatus',
    width: 90,
    align: 'center',
    render
  },
  {
    title: '采购预算',
    dataIndex: 'purchaseStatus',
    width: 90,
    align: 'center',
    render
  },
  {
    title: '增量资产',
    dataIndex: 'countryofStatus',
    width: 90,
    align: 'center',
    render
  },
  {
    title: '操作',
    fixed: 'right',
    width: 156,
    align: 'right',  
    render: () => (
      <div className="buttons">
        <Button className="buttons-item" type="link">编辑</Button>
        <Button className="buttons-item" type="link">删除</Button>
        <Button className="buttons-item" type="link">下载</Button>
      </div>
    ),
  },
]

class List extends React.Component {
  
  state = {
    loaded: false, // 是否已加载完毕
    headerTitle: '项目列表', // 页面标题
    headerOptions: [
      { name: '首页', path: '/home' },
      { name: '项目列表' },
      { name: '所有项目' },
    ], // 页面栈
    total: null, // 数据总数
    pageTotalAmount: null, // 本页总金额
    listData: [], // 列表数据
    pageSizeOptions: [1, 2, 5, 7], // 指定每页可以显示多少条
    page: 1, // 当前页数
    rows: 1, // 每页条数
    radioValue: '', // 单选框值(空:全部, JCXM:经常项目, WNXM:往年项目, XZXM:新增项目)
    searchValue: '', // 搜索框值
  }

  componentDidMount() {
    this.getProjectList()
  }

  // 获取项目列表
  getProjectList = () => {
    let { page, rows, radioValue, searchValue } = this.state
    getProjectList({
      page,
      rows,
      type: radioValue,
      keyword: searchValue
    }).then(res => {
      console.log(res)
      let { data, total, pageTotalAmount } = res
      data = data.map((item, index) => {
        item.key = index
        return item
      })
      this.setState({
        loaded: true,
        listData: data,
        total,
        pageTotalAmount
      })
    })
  }

  // 导出
  export = () => {
    console.log('点击了导出')
  }

  // 输入框变化监听事件
  onSearch = (value) => {
    this.setState({
      searchValue: value,
      page: 1
    }, () => {
      this.getProjectList()
    })
  }

  // 单选框选项变化时的回调函数	
  onRadioChange = (e) => {
    let { value } = e.target
    this.setState({
      radioValue: value,
      page: 1
    }, () => {
      this.getProjectList()
    })
  }

  // 页码改变的回调，参数是改变后的页码及每页条数
  onPaginationChange = (page, rows) => {
    this.setState({
      page,
      rows
    }, () => {
      this.getProjectList()
    })
  }

  render() {
    let { headerTitle, headerOptions, pageTotalAmount, loaded, listData, total, pageSizeOptions, page, rows, radioValue } = this.state
    return loaded ? (
      <>
        <div className="_list">
          <Header title={ headerTitle } options={ headerOptions }></Header>
          <div className="list-container">
            <div className="list-box">
              <div className="tabs">
                <div className="tabs-left">
                  <Radio.Group value={ radioValue } onChange={ this.onRadioChange }>
                    <Radio.Button value="">全部</Radio.Button>
                    <Radio.Button value="JCXM">经常性项目</Radio.Button>
                    <Radio.Button value="XZXM">新增项目</Radio.Button>
                    <Radio.Button value="WNXM">往年度本年待支付</Radio.Button>
                  </Radio.Group>
                  <Button className="export" type="primary" icon={ <DownloadOutlined /> } onClick={ this.export }>导出</Button>
                </div>
                <div className="tabs-right">
                  <div className="search-bar">
                    <Input.Search
                      placeholder="请输入筛选内容"
                      enterButton="筛选"
                      style={{ width: 352 }}
                      onSearch={ this.onSearch }
                    />
                  </div>
                </div>
              </div>
              <div className="table">
                <Table columns={ columns } dataSource={ listData } scroll={{ x: 1300 }} pagination={ false } loading={ false }/>
              </div>
              <div className="pagination">
                <div className="pagination-toast">当前页面金额总计： <span className="pagination-toast-number">{ pageTotalAmount }</span> 元 / 总共 { total } 条</div>
                <Pagination
                  showSizeChanger
                  current={ page }
                  defaultPageSize={ rows }
                  pageSizeOptions={ pageSizeOptions }
                  total={ total }
                  onChange={ this.onPaginationChange }
                >
                </Pagination>
              </div>
            </div>
          </div>
        </div>
      </>
    ) : null
  }
}

export default List